<template>
	<view class="container">
		<loading :show="loading_show && naviHeight"></loading>
		<refresh-view :loading="refresher_show" :height="naviHeight"></refresh-view>
		<move-button :show="returnTop_show" :navi_Height="naviHeight" :defaultBottom="320" :defaultRight="20" @returnTop="returnTop">
			<image class="returnTopImg" src="@/static/images/home/returnTop.png" mode="aspectFill"></image>
		</move-button>
		<customHead
			title="购物车"
			navi_background="#fff"
		>
			<!-- <template>
				<view class="expense_desc">
					<view class="expense_item" @click="$emit('searchClick')">
						<text>运费</text>
						<span>￥12</span>
						<text>，满</text>
						<span>￥298</span>
						<text>免运费</text>
					</view>
					<view class="expense_item_right" @click="$emit('searchClick')">
						<view class="item1">
							<u-icon name="share" color="#01cb88"></u-icon>
							<text>分享</text>
						</view>
						<view class="item1">
							<u-icon name="trash" color="#01cb88"></u-icon>
							<text>清空</text>
						</view>
					</view>
				</view>
			</template> -->
		</customHead>
		<view class="goods_main" v-if="naviHeight">
			<view class="cart_box_list" v-if="currentFirm.id && cartList.length">
				<uni-swipe-action ref="uSwipeAction" :autoClose="true" :show="swipeShow" :threshold="40">
					<uni-swipe-action-item ref="action" :right-options="options" v-for="(item, index) in cartList" @click.stop="deleteGoods(item.id, index)" :key="item.id">
						<view class="goods" id="goosItem" @click="Topath('/subpack_category/goodsDetail/goodsDetail?id=' + item.goodsId)">
							<view class="left" @click.stop="selectGoodsTap(index)">
								<aicon v-if="item.sltState === 1" type="roundcheckfill" :color="_temp_themeColor" size="25"></aicon>
								<aicon v-else type="round" color="#eee" size="25"></aicon>
							</view>
							<view class="goods_item _clickOpacity"
								:style="{opacity: item.goodsSpecification[0].stockNum <= 0 || item.plugsGoods.stockNum <= 0? 0.5:1}"
							>
								<view class="image" v-if="item.goodsSpecification.length">
									<image
										:src="item.goodsSpecification[0].specificationImages? item.goodsSpecification[0].specificationImages:item.plugsGoods.previewUrl"
										lazy-load
										:lazy-load-margin="0"
										mode="aspectFill"
									></image>
									<view class="noStock" v-if="item.goodsSpecification[0].stockNum <= 0">
										<image src="../../static/images/cart/noStock.png" mode="aspectFill"></image>
									</view>
									<view
										class="littleStock"
										v-if="item.goodsSpecification[0].stockNum < 10 && item.goodsSpecification[0].stockNum > 0"
									>
										仅剩{{item.goodsSpecification[0].stockNum}}件
									</view>
								</view>
								<view class="image" v-else>
									<image :src="item.plugsGoods.previewUrl" lazy-load mode="aspectFill"></image>
									<view class="noStock" v-if="item.plugsGoods.stockNum <= 0">
										<image src="../../static/images/cart/noStock.png" mode="aspectFill"></image>
									</view>
									<view
										class="littleStock"
										v-if="item.plugsGoods.stockNum < 10 && item.plugsGoods.stockNum > 0"
									>
										仅剩{{item.plugsGoods.stockNum}}件
									</view>
								</view>
								<view class="title">
									<view class="">
										<text class="title_text" :style="{color: _temp_titleColor}">{{item.plugsGoods.goodsName}}</text>
										<view class="goodsSpec" v-if="item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null">
											<text :style="{backgroundColor: _temp_themeColor}" v-for="(value, key) in JSON.parse(item.goodsSpecification[0].specificationName)" :key="key">
												{{ value }}
											</text>
										</view>
									</view>
									<view class="price">
										<view class="" :style="{'color':_temp_themeColor}" v-if="item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null">
											<span>¥</span>
											{{ item.goodsSpecification[0].dealPrice }}
										</view>
										<view class="" :style="{'color':_temp_themeColor}" v-else>
											<span>¥</span>
											{{ item.plugsGoods.goodsPrice }}
										</view>
										<view class="numbox">
											<view class="" v-if="item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null">
												<view  class="buy">
													<view class="btn" @click.stop="editGoods(index, 'jian')">
														<aicon type="indeterminate-circle-fill" size="25" :color="item.goodsNum <= 1 ? '#eee' : _temp_themeColor"></aicon>
													</view>
													<view class="input">
														<input type="number" disabled :value="item.goodsNum" />
													</view>
													<view class="btn" @click.stop="editGoods(index, 'jia')">
														<aicon type="add-circle-fill" size="25" :color="_temp_themeColor" ></aicon>
													</view>
												</view>
											</view>
											<view class="" v-else>
												<view  class="buy">
													<view class="btn" @click.stop="editGoods(index, 'jian')">
														<aicon type="indeterminate-circle-fill" size="25" :color="item.goodsNum <= 1 ? '#eee' : _temp_themeColor"></aicon>
													</view>
													<view class="input">
														<input type="number" disabled :value="item.goodsNum" />
													</view>
													<view class="btn" @click.stop="editGoods(index, 'jia')">
														<aicon type="add-circle-fill" size="25" :color="_temp_themeColor"></aicon>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<view class="emptyGoods" v-if="!currentFirm.id">
				<u-empty
					text="暂无店铺"
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
				<view class="button_box">
					<button @click="gotoAddStore" :style="{backgroundColor: _temp_themeColor}" class="button _btn_base">新建店铺</button>
				</view>
			</view>
			<view class="emptyGoods" v-if="!cartList.length && currentFirm.id">
				<u-empty
					text="购物车空空如也"
					mode="data"
					icon="http://cdn.uviewui.com/uview/empty/data.png"
				>
				</u-empty>
				<view class="button_box">
					<button @click="gotoCategory" :style="{backgroundColor: _temp_themeColor}" class="button _btn_base">去逛逛</button>
				</view>
			</view>
			<view class="" v-if="!cartList.length">
				<view class="suppose_box" v-if="currentFirm.id">
					<image class="image1" src="@/static/images/cart/heart.png" mode="aspectFill"></image>
					<text class="text">猜你喜欢</text>
				</view>
				<view class="content" v-if="itemList.length && currentFirm.id">
					<view class="content_goods_list">
						<view class="goods_box">
							<view class="item_list_box _fade" v-for="(item ,index) in itemList" :key="index">
								<view class="hot_sale" v-if="item.type === 'hot'">
									<view class="title_box" @click="gotoRanking">
										<text class="title">热卖TOP榜</text>
										<text class="desc">今日销售冠军</text>
									</view>
									<view class="hot_goods_box">
										<view class="goods_item1" @click="gotoGoodsDetail(item1.id)" v-for="(item1, index1) in item.list" :key="index1">
											<image class="image" :src="item1.previewUrl" mode="aspectFill"></image>
											<text class="desc">top{{index1 + 1}}</text>
										</view>
									</view>
								</view>
								<view class="goods_item" v-if="item.type === 'goods'" @click="gotoGoodsDetail(item.id)">
									<image :src="item.previewUrl" mode="aspectFill"></image>
									<view class="goods_title">
										<text  :style="{color: _temp_titleColor}">{{item.goodsName}}</text>
									</view>
									<view class="desc">
										<text :style="{color: _temp_textColor}">{{item.goodsRemarks}}</text>
									</view>
									<view class="price">
										<view class="" v-if="currentFirm.id">
											<span>￥</span>
											<text>
												{{item.goodsPrice}}
											</text>
										</view>
										<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
										<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="category_hot_sale" v-if="item.type === 'cate'">
									<view class="title_box" @click="gotoRankingListAll(item.categoryId)">
										<text class="title">{{item.categoryName}}热卖榜</text>
										<u-icon name="arrow-right" size="18" color="#fff"></u-icon>
									</view>
									<view class="content">
										<view class="content_item" @click="gotoGoodsDetail(item.id)" v-for="(item, index1) in item.list" :key="index1">
											<view class="image_box">
												<view class="sort_icon" :class="[index1<3?`back${index1}`:'back']">
													<text class="top">TOP</text>
													<text class="text">{{index1+1}}</text>
												</view>
												<image :src="item.previewUrl" mode="aspectFill"></image>
											</view>
											<view class="item_right">
												<view class="title_text1">
													<text class="desc_text">{{item.goodsName}}</text>
												</view>
												<view class="price">
													<view class="" v-if="currentFirm.id">
														<span>￥</span>
														<text>
															{{item.goodsPrice}}
														</text>
													</view>
													<text v-else class="desc_text" :style="{color: _temp_textColor}">建店看价格</text>
													<image class="image" @click.native.stop="addCart(item)" src="@/static/images/home/cart.png" mode="aspectFill"></image>
												</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit_btn" v-if="cartList.length > 0 && currentFirm.id">
			<view class="choose_box" @click="selectAllTap()">
				<aicon v-if="if_selected_all" type="roundcheckfill" :color="_temp_themeColor" size="25"></aicon>
				<aicon v-else type="round" color="#eee" size="25"></aicon>
				<text>全选</text>
			</view>
			<view class="count_box">
				<view class="number">
					<text class="text1">合计</text>
					<text class="text2">￥</text>
					<text class="text3">{{selected_total_money}}</text>
				</view>
				<view class="button_box">
					<button 
						class="button _btn_base" 
						:disabled="!selected_goods_num" 
						@click="payTheBill"
						:style="{opacity: selected_goods_num? '1':'0.6', background: lightColor}"
					>
						去结算({{selected_goods_num}})
					</button>
				</view>
			</view>
		</view>
		<tabbar :current="3" :cart="totalCartNum"></tabbar>
		<view class="" style="height: 260rpx;"></view>
	</view>
</template>

<script>
	import {
		getPlugsShopCartByUserId,
		searchPlugsGoodCategoryList,
		searchPlugsGoodsByCategoryId,
		delPlugsShopCart,
		insertPlugsShopCart,
		searchPlugsHotGoodsList
	} from "@/tools/request/api.js"
	import { mapState, mapActions, mapMutations } from 'vuex'
	import { makeContrast, makeLightColor } from '@/tools/utils/colorful.js'
	export default {
		data() {
			return {
				cartList: [],
				goodsList: [],
				hotList: [],
				hotList1: [],
				loading_show: false,
				refresher_show: false,
				cartPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false
				},
				goodsPage: {
					page: 1,
					size: 10,
					totalPage: 0,
					hasNextPage: false
				},
				categoryList: [],
				categoryItemIndex: 0,
				scrollTop: 0,
				returnTop_show: false,
				itemList: [],
				headHeight: 0,
				slideHeight: 94,
				goodsNum: 1,
				pullDis: 0,
				options: [
					{
						text: '删除'
					}
				],
				selected_item_list: [], 
				selected_total_money: 0, // 总金额
				if_selected_all: false, //是否全选
				selected_goods_num: 0, // 已选的总商品数量
				cartContentInfo: {
					avaliableHeight: 0,
					itemHeight: 0
				},
				scrollTop: 0,
				swipeShow: false,
			};
		},
		onShow () {
			
		},
		onLoad () {
			this.IS_APP_DONE((res) => { //登陆完成会调用
				// if (!this.currentFirm.id) return;
				this.getCartList();
				if (this.totalCartNum == 0) {
					this.getSupposeList();
				}
			});
		},
		watch: {
			totalCartNum (newVal, oldVal) {
				this.getCartList();
				if (newVal == 0) {
					this.getCategoryList();
				}
			}
		},
		computed: {
			...mapState('cart_store', ['totalCartNum', 'totalCartList']),
			lightColor () {
				let light_color = makeLightColor(this._temp_themeColor, 0.2);
				let linearBack = `linear-gradient( to right, ${this._temp_themeColor}, ${light_color})`;
				return linearBack;
			}
		},
		methods: {
			...mapActions('cart_store', ['getShopCartList']),
			...mapMutations('pay_store', ['SET_SHOP_CART_LIST']),
			...mapMutations('app_store', ['IS_APP_DONE']),
			gotoAddStore () {
				uni.navigateTo({
					url: '/subpack_my/myStore/myStore'
				})
			},
			gotoCategory () {
				uni.switchTab({
					url: '/pages/category/category'
				})
			},
			Topath(route) {
				uni.navigateTo({
					url: route
				});
			},
			addCart (item) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				this.addCartGoods(item);
			},
			gotoGoodsDetail (id) {
				if (!this.currentFirm.id) return this.gotoAddStore();
				uni.navigateTo({
					url: `/subpack_category/goodsDetail/goodsDetail?id=${id}`
				})
			},
			gotoRanking () {
				uni.navigateTo({
					url: '../../subpack_home/rankingList/rankingList'
				})
			},
			gotoRankingListAll (id) {
				uni.navigateTo({
					url: `/subpack_home/rankingListAll/rankingListAll?categoryId=${id}`
				})
			},
			// 点击勾选按钮
			selectGoodsTap(index) {
				let self = this;
				let data = self.cartList[index];
				let select = self.cartList[index].sltState;
				if (data.goodsSpecification.length > 0 && data.goodsSpecification[0] != null) {
					if (data.goodsSpecification[0].stockNum > 0) {
						if (select == 0) {
							self.cartList[index].sltState = 1;
						} else {
							self.cartList[index].sltState = 0;
						}
					} else {
						uni.$showMsg('库存不足');
					}
				} else {
					if (data.plugsGoods.stockNum > 0) {
						if (select == 0) {
							self.cartList[index].sltState = 1;
						} else {
							self.cartList[index].sltState = 0;
						}
					} else {
						uni.$showMsg('库存不足');
					}
				}
	
				self.getCheckCartNumber();
			},
			// 全选商品
			selectAllTap () {
				if (this.if_selected_all) {
					this.cartList.forEach((item) => {
						item.sltState = false;
					})
				} else {
					this.cartList.forEach((item) => {
						if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
							item.sltState = item.goodsSpecification[0].stockNum > 0? 1: 0
						} else {
							item.sltState = item.plugsGoods.stockNum > 0? 1: 0
						}
					})
				}
				this.getCheckCartNumber();
			},
			// 点击加减号编辑商品数量
			editGoods(index, type) {
				let self = this;
				let nums = self.cartList[index].goodsNum;
				let list = self.cartList[index].goodsSpecification;
				let stok = 0;
				let list2 = {
					businessId: self.businessId,
					goodsCategoryId: self.cartList[index].goodsCategoryId,
					goodsNum: 1,
					goodsSpecificationIds: self.cartList[index].goodsSpecificationIds,
					goodsId: self.cartList[index].goodsId,
					type: 0
				};
				if (list.length == 0 || list[0] == null) {
					stok = self.cartList[index].plugsGoods.stockNum;
				} else {
					stok = self.cartList[index].goodsSpecification[0].stockNum;
				}
				if (type === 'jian') {
					if (nums > 1) {
						self.cartList[index].goodsNum--;
						list2.type = 1;
						self.getCartEdit(list2);
					}
				} else if (type === 'jia') {
					if (nums < stok) {
						self.cartList[index].goodsNum++;
						list2.type = 0;
						self.getCartEdit(list2);
					} else {
						uni.$showMsg('已超过最大库存数量');
					}
				}
				self.getCheckCartNumber();
			},
			// 编辑商品后，计算商品的总价及数量等
			getCheckCartNumber() {
				let selected_total_money = 0; 	// 已选的商品总金额
				let selected_goods_num = 0; 	// 已选的商品总数量
				let cart_list_avaliable_total_goods = 0; 	// 购物车列表内有库存的商品总数
				let selected_item_list = [];		// 已选的商品项
				this.cartList.forEach((item, index) => {
					if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
						if (item.sltState == 1) {
							selected_total_money += item.goodsNum * item.goodsSpecification[0].dealPrice;
							selected_goods_num += item.goodsNum;
							selected_item_list.push(item);
						}
						if (item.goodsSpecification[0].stockNum > 0) {
							cart_list_avaliable_total_goods += item.goodsNum;
						}
					} else {
						if (item.sltState == 1) {
							selected_total_money += item.goodsNum * item.plugsGoods.goodsPrice;
							selected_goods_num += item.goodsNum;
							selected_item_list.push(item);
						}
						if (item.plugsGoods.stockNum > 0) {
							cart_list_avaliable_total_goods += item.goodsNum;
						}
					}
				})
				this.selected_total_money = selected_total_money.toFixed(2);
				this.selected_goods_num = selected_goods_num;
				this.if_selected_all = selected_goods_num === cart_list_avaliable_total_goods;
				this.selected_item_list = selected_item_list;
			},
			
			// 更改商品数量请求
			getCartEdit(data) {
				if (this.loading_show) return;
				let postData = data;
				this.loading_show = true;
				insertPlugsShopCart(postData).then((res) => {
					this.loading_show = false;
					if (res.code !== 200) uni.$showMsg('更改失败');
					this.getShopCartList();
				});
			},
			// 删除购物车商品
			deleteGoods (id, index) {
				let postData = `ids=${id}`
				uni.showModal({
					title: '提示',
					content: '确定要删除吗?',
					success: (res) => {
						if (!res.confirm) return;
						this.loading_show = true;
						delPlugsShopCart(postData).then(res => {
							this.loading_show = false;
							if (res.code == 200) {
								this.cartList.splice(index, 1);
								this.getShopCartList();
							} else {
								uni.$showMsg('删除失败');
							}
						})
					}
				});
			},
			// 结算
			payTheBill () {
				if (this.accessToken) {
					this.SET_SHOP_CART_LIST(this.selected_item_list);
					uni.setStorage({
						key: '__ddminiShopCart',
						data: this.selected_item_list,
						success: () => {
							uni.navigateTo({
								url: '/pages/order/payEnter/payEnter'
							});
						}
					});
				} else {
					uni.navigateTo({
						url: '/subpack_login/login/login'
					});
				}
			},
			
			async getCartList(clear) {
				let cartList = [];
				Object.assign(cartList, this.totalCartList);
				cartList.forEach((item) => {
					if (item.goodsSpecification.length > 0 && item.goodsSpecification[0] != null) {
						item.sltState = item.goodsSpecification[0].stockNum > 0? 1: 0
					} else {
						item.sltState = item.plugsGoods.stockNum > 0? 1: 0
					}
				})
				this.cartList = cartList;
				this.getCheckCartNumber();
			},
			
			// 递归找出所有最低级分类（绑定商品的分类）
			filterCateChildren (list) {
				list.forEach((item, index) => {
					if (item.pgoodCategoryList.length) {
						this.filterCateChildren(item.pgoodCategoryList);
					} else {
						this.categoryList.push(item);
					}
				})
			},
			
			// 获取商品分类列表
			async getCategoryList () {
				console.log('category---------------------------')
				let data = {
					page: 1,
					size: 100,
					adminId: this.adminId,
					id: 143,
					keyword: '',
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				this.loading_show = true;
				let res = await searchPlugsGoodCategoryList(data);
				this.loading_show = false;
				if (res.code != 200) return uni.$showMsg();
				let list = res.body.list;
				// this.filterCateChildren(list);
				this.categoryList = list;
				this.getTodayHot();
			},
			
			
			// 根据分类id获取销量排行列表
			async getGoodsList (id, page, size) {
				let data = {
					page: page? page: this.goodsPage.page,
					size: size? size: this.goodsPage.size,
					businessId: this.businessId,
					categoryId: id
				};
				let res = await searchPlugsHotGoodsList(data);
				if (res.code != 200) return uni.$showMsg();
				this.goodsPage.totalPage = res.body.pages;
				this.goodsPage.hasNextPage = res.body.hasNextPage;
				let list = res.body.list;
				return list;
			},
			
			// 获取猜你喜欢列表
			getSupposeList () {
				this.getCategoryList();
			},
			
			// 获取热卖TOP榜
			async getTodayHot (clear) {
				let list = await this.getGoodsList('-1');
				if (this.refresher_show) {
					this.itemList = [];
				}
				this.refresher_show = false;
				if (!list.length) return;
				if (!this.itemList.length) {
					let itemList = [];
					for (let i = 0; i < 4; i++) {
						itemList.push(list[i]);
					}
					this.itemList[0] = {
						type: 'hot',
						list: itemList
					};
				}
				this.getSalesVolumeByCateAll(list);
			},
			
			// 获取全分类下的商品列表
			getSalesVolumeByCateAll (list) {
				list.forEach((item) => {
					item.type = 'goods';
					this.itemList.push(item);
				})
				this.getSalesVolumeByCate();
			},
			
			// 获取分类下的商品销售排行
			async getSalesVolumeByCate () {
				let cateId = this.categoryList[this.categoryItemIndex].id.toString();
				let list = await this.getGoodsList(cateId, 1, 3); // page; size
				let itemList = [];
				list.forEach((item, index) => {
					itemList.push(item);
				})
				this.itemList.push({
					type: 'cate',
					list: itemList,
					categoryName: this.categoryList[this.categoryItemIndex].categoryName
				})
				this.categoryItemIndex++;
			},
			
			// 下拉刷新
			onPullDownRefresh () {
				this.goodsPage.page = 1;
				this.categoryItemIndex = 0;
				this.refresher_show = true;
				this.getSupposeList();
				this.getShopCartList();
			},
			// 触底加载更多
			onReachBottom() {
				if (!this.goodsPage.hasNextPage || this.categoryItemIndex + 1 > this.categoryList.length) return;
				this.goodsPage.page++;
				this.getTodayHot();
			},
			// 回到顶部
			returnTop () {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
		},
		onPageScroll (e) {
			if (e.scrollTop >= 900) {
				if (!this.returnTop_show) {
					this.returnTop_show = true;
				}
			} else {
				if (this.returnTop_show) {
					this.returnTop_show = false;
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		
		.returnTopImg{
			width: 80rpx;
			height: 80rpx;
		}
		
		.expense_desc{
			width: 100%;
			height: 94rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0 5rpx 10rpx 5rpx #eaeaea;
			
			.expense_item{
				
				text{
					font-size: 28rpx;
				}
				span{
					color: #ff0000;
					font-weight: bold;
				}
				.item1{
					color: $theme-color;
					display: flex;
				}
			}
			.expense_item_right{
				display: flex;
				align-items: center;
					
				.item1{
					color: $theme-color;
					display: flex;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}
		}
		
		.goods_main{
			
			.cart_box_list{
				box-sizing: border-box;
				border-left: 1rpx solid #ddd;
				background-color: #fff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				
				.goods{
					display: flex;
					justify-content: space-between;
					align-items: center;
					min-width: 0;
					border-bottom: 3rpx solid #f5f5f5;
					
					.left {
						width: 100rpx;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.goods_item{
						flex: 1;
						padding: 20rpx 0;
						border-bottom: 1rpx solid #e6e6e6;
						display: flex;
						align-items: center;
						position: relative;
					
						.image{
							width: 180rpx;
							height: 180rpx;
							border-radius: 20rpx;
							position: relative;
							
							image{
								width: 100%;
								height: 100%;
								border-radius: 20rpx;
							}
							.noStock{
								width: 100%;
								height: 100%;
								position: absolute;
								left: 0;
								top: 0;
								background-color: rgba(0, 0, 0, 0.3);
								
								image{
									width: 100%;
									height: 100%;
								}
							}
							.littleStock{
								font-size: 24rpx;
								padding: 4rpx 6rpx;
								// background-color: #FF1414;
								background: linear-gradient(to right, #ff370f, #FF1414);
								color: #fff;
								position: absolute;
								border-radius: 10rpx;
								right: 0;
								top: 0;
							}
						}
						
						
						
						.title{
							flex: 1;
							display: flex;
							flex-direction: column;
							margin-left: 20rpx;
							box-sizing: border-box;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							padding-right: 20rpx;
							
							.title_text{
								font-size: 30rpx;
								padding-bottom: 14rpx;
								overflow: hidden;
								white-space: normal;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
							.goodsSpec{
								font-size: 26rpx;
								display: flex;
								flex-wrap: wrap;
								
								text{
									background-color: #00c382;
									color: #fff;
									margin: 4rpx 6rpx;
									padding: 0 10rpx;
									border-radius: 6rpx;
								}
							}
							.discount{
								display: flex;
								flex-wrap: wrap;
								
								.couponAfter{
									margin: 4rpx 6rpx;
									
									text{
										padding: 4rpx 16rpx;
										background-color: #FF0000;
										color: #fff;
										font-size: 26rpx;
										border-radius: 10rpx;
									}
								}
								.hotSale{
									margin: 4rpx 6rpx;
									padding: 4rpx 0;
									
									text{
										padding: 4rpx 4rpx;
										background-color: #FFDEE2;
										color: #FF0000;
										font-size: 22rpx;
										border-radius: 10rpx;
									}
								}
								.coupondesc{
									margin: 4rpx 6rpx;
									display: flex;
									align-items: center;
									margin-top: 6rpx;
									
									.coupon{
										border: 1rpx solid #FF0000;
										display: flex;
										align-items: center;
										border-radius: 6rpx;
										
										.text1{
											width: 26rpx;
											padding: 4rpx 4rpx;
											background-color: #FF0000;
											color: #fff;
											font-size: 22rpx;
											border-radius: 6rpx;
										}
										.text2{
											padding: 0 4rpx;
											font-size: 22rpx;
											color: #FF0000;
										}
									}
								}
							}
							.desc_text{
								color: #7a7a7a;
								font-size: 24rpx;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							
							.price{
								margin-top: 40rpx;
								font-size: 34rpx;
								color: #FF0000;
								font-weight: bold;
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								span{
									font-size: 30rpx;
								}
								.image{
									width: 50rpx;
									height: 50rpx;
								}
								
								.numbox {
									
									.none {
										color: #999;
										font-size: 26rpx;
									}
								
									.buy {
										display: flex;
										align-items: center;
								
										.btn {
											width: 50rpx;
											height: 50rpx;
											display: flex;
											align-items: center;
											justify-content: center;
								
											aicon {
												width: 100%;
												height: 100%;
												display: flex;
												align-items: center;
												justify-content: center;
											}
										}
								
										.input {
											width: 100rpx;
											height: 50rpx;
											background-color: #eee;
											margin: 0 6rpx;
											border-radius: 100rpx;
								
											input {
												width: 100%;
												height: 100%;
												text-align: center;
												font-size: 30rpx;
												color: #1c1c1c;
											}
										}
									}
								}
							}
						}
					}
				}
			}
			
			.emptyGoods{
				
				.button_box{
					margin-top: 30rpx;
					
					.button{
						width: 280rpx;
						height: 74rpx;
						border-radius: 37rpx;
						// background: linear-gradient(to right, #00e297, #00c885);
						color: #fff;	
						font-size: 30rpx;
					}
				}
			}
			
			.suppose_box{
				margin-top: 40rpx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.image1,.image2{
					width: 34rpx;
					height: 34rpx;
				}
				
				.text{
					padding: 0 30rpx;
					font-weight: bold;
				}
			}
			
			.content{
				padding: 30rpx 20rpx;
				padding-top: 0rpx;
				box-sizing: border-box;
					
				.content_goods_list{
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.goods_box{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						
						.item_list_box{
							width: 48%;
							
							.hot_sale{
								// width: 48%;
								width: 100%;
								background-image: linear-gradient(to right, #FF001D, #ff4810);
								padding: 15rpx 15rpx;
								box-sizing: border-box;
								border-radius: 20rpx;
								margin-top: 20rpx;
								// break-inside: avoid; // 不被截断 默认值是auto，会被截断
								
								.title_box{
									display: flex;
									flex-direction: column;
									align-items: center;
									
									.title{
										color: #fff;
										font-size: 40rpx;
									}
									.desc{
										color: #fff;
										font-size: 20rpx;
									}
								}
								.hot_goods_box{
									width: 100%;
									display: flex;
									align-items: center;
									flex-wrap: wrap;
									justify-content: space-between;
									
									.goods_item1{
										flex: 0 0 48%;
										display: flex;
										flex-direction: column;
										align-items: center;
										border-radius: 10rpx;
										overflow: hidden;
										background-color: #fff;
										margin-top: 10rpx;
										
										.image{
											width: 150rpx;
											height: 150rpx;
											border-radius: 10rpx;
										}
										text{
											display: block;
											width: 100%;
											font-size: 24rpx;
											padding: 6rpx 0;
											background-color: #FDE6C1;
											text-align: center;
											color: #A25B0B;
										}
									}
								}
							}
							
							.category_hot_sale{
								// width: 48%;
								width: 100%;
								background-image: linear-gradient(to right, #FF001D, #ff4810);
								box-sizing: border-box;
								margin: 20rpx 0;
								border-radius: 20rpx;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								padding: 5rpx;
								// break-inside: avoid; // 不被截断 默认值是auto，会被截断
								
								.title_box{
									display: flex;
									align-items: center;
									justify-content: center;
									padding: 20rpx 0;
									
									.title{
										color: #fff;
										font-size: 40rpx;
									}
								}
								.content{
									width: 100%;
									display: flex;
									flex-direction: column;
									background-color: #fff;
									border-radius: 20rpx;
									
									.content_item{
										display: flex;
										align-items: center;
										border-bottom: 1rpx solid #ddd;
										padding: 10rpx 0;
										
										.image_box{
											width: 100rpx;
											height: 100rpx;
											position: relative;
											
											.sort_icon{
												color: #fff;
												position: absolute;
												top: -5rpx;
												left: 0;
												display: flex;
												flex-direction: column;
												align-items: center;
												padding-top: 4rpx;
												padding-left: 5rpx;
												padding-right: 4rpx;
												border-radius: 5rpx;
												
												.top{
													font-size: 14rpx;
												}
												
												.text{
													font-size: 20rpx;
												}
											}
											.back0{
												background-image: linear-gradient(to bottom, #ff606b, #ff404d);
											}
											.back1{
												background-image: linear-gradient(to bottom, #FF9843, #FF5810);
											}
											.back2{
												background-image: linear-gradient(to bottom, #FFC54B, #FFAD4C);
											}
											.back{
												background-image: linear-gradient(to bottom, #30FABB, #14DA9B);
											}
											
											image{
												width: 100%;
												height: 100%;
											}
										}
										
										.item_right{
											flex: 1;
											display: flex;
											flex-direction: column;
											margin-left: 20rpx;
											
											.title_text1{
												font-size: 24rpx;
												white-space: normal;
												display: -webkit-box;
												-webkit-line-clamp: 2;
												-webkit-box-orient: vertical;
												overflow: hidden;
												text-overflow: ellipsis;
											}
											
											.price{
												width: 100%;
												margin-top: 20rpx;
												font-size: 30rpx;
												color: #FF0000;
												font-weight: bold;
												display: flex;
												justify-content: space-between;
												align-items: center;
												
												span{
													font-size: 30rpx;
												}
												.image{
													width: 30rpx;
													height: 30rpx;
												}
												.desc_text{
													font-size: 22rpx;
													color: #aaaaaa;
												}
											}
										}
									}
									.content_item:last-child{
										border: none;
									}
								}
							}
							
							.goods_item{
								// width: 48%;
								width: 100%;
								padding: 0 15rpx;
								display: flex;
								flex-direction: column;
								background-color: #fff;
								padding: 30rpx 20rpx;
								box-sizing: border-box;
								border-radius: 20rpx;
								margin-top: 26rpx;
								// break-inside: avoid; // 不被截断 默认值是auto，会被截断
								
								.goods_title{
									width: 100%;
									max-height: 3em;
									white-space: normal;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									text-overflow: ellipsis;
									line-height: 50rpx;
									margin-top: 20rpx;
								}
								.desc{
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: normal;
									display: -webkit-box;
									-webkit-line-clamp: 1;
									-webkit-box-orient: vertical;
									font-size: 28rpx;
									color: #9a9a9a;
									margin-top: 14rpx;
								}
								
								image{
									width: 280rpx;
									height: 280rpx;
									border-radius: 10rpx;
								}
								.price{
									margin-top: 20rpx;
									font-size: 34rpx;
									color: #FF0000;
									font-weight: bold;
									display: flex;
									justify-content: space-between;
									align-items: center;
									
									span{
										font-size: 30rpx;
									}
									.image{
										width: 40rpx;
										height: 40rpx;
									}
								}
							}
						
						}
					}
				}
			}
		}
		
		.submit_btn{
			width: 100%;
			// height: 120rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0 -5rpx 10rpx 5rpx #f0f0f0;
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 120rpx;
			left: 0;
			z-index: 999;
			padding-bottom: env(safe-area-inset-bottom);
			
			.choose_box{
				display: flex;
				align-items: center;
			}
			.count_box{
				display: flex;
				align-items: center;
				
				.number{
					
					.text1{
						font-size: 30rpx;
					}
					.text2{
						font-size: 26rpx;
						font-weight: bold;
						color: #FF0000;
					}
					.text3{
						font-size: 38rpx;
						font-weight: bold;
						color: #FF0000;
					}
				}
				.button_box{
					margin-left: 20rpx;
					
					.button{
						padding: 0 50rpx;
						height: 80rpx;
						border-radius: 40rpx;
						font-size: 30rpx;
						color: #fff;
						margin: 20rpx 0;
					}
				}
			}
		}
	}
</style>

